<template>
	<div class="gai">
		<!--修改规则模态框-->
		<div class="xiu">
			<el-dialog  :visible.sync="forwardData">
			 <el-form :model="form" :rules="rules" ref="form"  class="demo-ruleForm">
				<el-form-item label="规则名称" :label-width="formLabelWidth" prop="name">
					 <el-input v-model="form.name" type="text" auto-complete="off" style="width:60%"></el-input>
				</el-form-item>
				<el-form-item  :label-width="formLabelWidth">
					 <span>支持中文,英文字母,数字和下划线,<br/>长度限制4-30，中文算两位</span>
				</el-form-item>
				<el-form-item label="数据格式" :label-width="formLabelWidth" prop="format">
						<el-radio v-model="form.format" label="Json" style="width:60%">Json</el-radio>
				</el-form-item>
				 <el-form-item label="规则描述" :label-width="formLabelWidth" prop="desc">
						<el-input v-model="form.desc" type="textarea" auto-complete="off" style="width:60%"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="forwardData = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('form')">确 定</el-button>
			</div>
			</el-dialog>
		</div>
	</div>
</template>
<script>
import bus from '../../eventBus.js'
// import {mapGetters} from 'vuex';
export default{
	name:'modify1',
	data(){
		return{
			form:{
				name:null,
				format:null,
				desc:null,
			},
			forwardData:false,
			formLabelWidth:"150px",
			rules:{
				name:[
					{required:true,message:'名称不能为空！',trigger:'blur'},
					{min:3,max:12,message:'名称长度须在3-12之间',trigger:'blur'}
				],
				desc:[
					{required:true,message:'设备描述不能为空',trigger:'blur'},
					{min:3,max:50,message:'设备描述长度不正确',trigger:'blur'}
				],
				format:[{required:true,message:'请选择数据格式',trigger:'change'}]
			},
		}
	},
	watch:{
		forwardData:function(){
			var self=this;
			this.$nextTick(function(){
				// 获取数据
				let user = sessionStorage.getItem('RuleManagement');
				if (user) {
					user = JSON.parse(user);
					self.form = user;
					console.log(self.form);
				}
			});
		},
	},
	methods:{
		submitData(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					var data=[];
					data.mode=this.dataForm.mode;
					data.mysql=this.dataForm.mysql;
					data.table=this.dataForm.table;
					data.topic=this.dataForm.topic;
					console.log(data,7777);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		//基本信息修改确认按钮
		submitForm(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.forwardData=false;
					// bus.$emit("modifydata",this.form);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
	},
	mounted(){
		var self=this;	  	 	
		bus.$on("ModifyTop",function (msg) {
			self.forwardData=msg;
		});
	}
}
</script>
<style>
</style>